{extend name="category" /}

{block name="content"}
<!-- 页面头部 -->
<div class="page-header">
    <div class="container">
        <h1 data-aos="fade-up">标签：#{$tag.name ?: '标签'}</h1>
        <p data-aos="fade-up" data-aos-delay="100">{$tag.description ?: '查看该标签下的所有文章'}</p>
        <nav aria-label="breadcrumb" data-aos="fade-up" data-aos-delay="200">
            <ol class="breadcrumb breadcrumb-custom">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item"><a href="/articles.html">新闻动态</a></li>
                <li class="breadcrumb-item active" aria-current="page">{$tag.name ?: '标签'}</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- 文章列表 -->
        <div class="col-lg-8">
            <div class="article-list">
                {carefree:article tagid='$tag.id' limit='10' order='create_time desc' id='article' empty='<div class="text-center py-5" data-aos="fade-up"><i class="bi bi-inbox" style="font-size: 4rem; color: #cbd5e1;"></i><p class="mt-3 text-secondary">该标签下暂无文章</p></div>'}
                <article class="article-card" data-aos="fade-up">
                    <div class="row g-0">
                        <div class="col-md-5">
                            <img src="{$article.cover_image ?: '/assets/images/placeholder/article-purple.svg'}" alt="{$article.title}" class="article-image">
                        </div>
                        <div class="col-md-7">
                            <div class="article-content">
                                <div class="article-meta">
                                    <span><i class="bi bi-calendar"></i> {$article.create_time|date='Y-m-d'}</span>
                                    <span><i class="bi bi-person"></i> {$article.author_name ?: '管理员'}</span>
                                    <span><i class="bi bi-eye"></i> {$article.view_count ?: 0}</span>
                                </div>
                                <h3><a href="/article/{$article.id}.html">{$article.title}</a></h3>
                                <p class="article-summary">{$article.summary ?: $article.content_preview}...</p>
                                {notempty name="article.tags"}
                                <div class="article-tags">
                                    {volist name="article.tags" id="tag"}
                                    <a href="/tag-{$tag.id}.html" class="article-tag">{$tag.name}</a>
                                    {/volist}
                                </div>
                                {/notempty}
                                <a href="/article/{$article.id}.html" class="read-more">
                                    阅读全文 <i class="bi bi-arrow-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </article>
                {/carefree:article}
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="col-lg-4">
            <!-- 标签信息 -->
            <div class="sidebar-widget" data-aos="fade-up">
                <div class="widget-header">
                    <h3><i class="bi bi-tag-fill"></i> 标签信息</h3>
                </div>
                <div class="category-info">
                    <p class="text-secondary">{$tag.description ?: '暂无描述'}</p>
                    <div class="info-stats">
                        <div class="stat-item">
                            <span class="stat-label">文章数</span>
                            <span class="stat-value">{$tag.article_count ?: 0}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 相关标签 -->
            <div class="sidebar-widget" data-aos="fade-up" data-aos-delay="100">
                <div class="widget-header">
                    <h3><i class="bi bi-tags"></i> 相关标签</h3>
                </div>
                <div class="tag-cloud">
                    {carefree:tag limit='20' order='article_count desc' id='t' empty='<div class="empty-state"><p>暂无标签</p></div>'}
                    <a href="/tag-{$t.id}.html" class="tag-item {if condition="$t.id == $tag.id"}tag-level-5{else /}tag-level-3{/if}" title="{$t.name} ({$t.article_count ?: 0}篇)">
                        {$t.name}
                    </a>
                    {/carefree:tag}
                </div>
            </div>

            <!-- 引入公共侧边栏 -->
            {include file="sidebar" /}
        </div>
    </div>
</div>
{/block}
